<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>左移与右移</title>
    <style>
     body{
          background-color: #F3EFE0;
      }
      .bot{
          color: #918E84;
          font-family:Arial, Helvetica, sans-serif;
          font-size: 24px;
          position: relative;
          top: 400px;
          right: 200px;
          float: right;
      }
      a{
          text-decoration: none;
          color: #918E84;
          font-family: Arial, Helvetica, sans-serif;
      }
      select{width:100px;height:150px}
      input[type=button]{width:50px}
      #opt{margin:90px 10px 0}
      .box{width:80%;margin:0 auto;background-color:#999999}
      .box div{float:left}
    </style>
  </head>
  <body>
    <div class="box">
      <div id="left">
        <p>可选项</p>
        <select multiple="multiple">
          <option>添加</option>
          <option>移动</option>
          <option>修改</option>
          <option>查询</option>
          <option>打印</option>
          <option>删除</option>
        </select>
      </div>
      <div id="opt">
        <input id="toRight" type="button" value=">"><br>
        <input id="toLeft" type="button" value="<"><br>
        <input id="toAllRight" type="button" value=">>"><br>
        <input id="toAllLeft" type="button" value="<<"><br>
      </div>
      <div id="right">
        <p>已选项</p>
        <select multiple="multiple"></select>
      </div>
    </div>
    <div class="bot">
      <a href="../章节目录/第十一章.html">返回</a>
      <br><br><br><br><br><br>
      <h3>Please appreciate((●'◡'●))......</h3>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
      // 获取按钮添加单击事件，获取第一个下拉框中被选中的option添加到第二个下拉框
      $('#toRight').click(function() {       // 右移
        $('#right>select').append($('#left>select>option:selected'));
      });
      $('#toLeft').click(function() {        // 左移
        $('#left>select').append($('#right>select>option:selected'));
      });
      $('#toAllRight').click(function() {    // 全部右移
        $('#right>select').append($('#left>select>option'));
      });
      $('#toAllLeft').click(function() {     // 全部左移
        $('#left>select').append($('#right>select>option'));
      });
    </script>
  </body>
</html>